<template> 
	<div class="Echarts">
		<div ref="myChart" id="myChart"  class="inMain" style="width: 418.48px;height: 267.06px;"></div>
	</div>
</template>
<script>
	
	export default {
		name: 'index',
		data() {
			return{
				cockpitData:[]
			}
		}, 
		mounted() {
			this.getList()
		},
		methods: {
			async getList(){
				var dt = {
					"params": {
						"normGuid": "208e9461-da2e-4244-9342-ac7eca37815e",
						"fieldList": []
					}
				};
				var _this = this;
				const aaa = await this.$api.post('dcockpit/rest/cockpitApi/searchListNormResult', dt)
				let {custom:{result}}={...aaa}
				_this.cockpitData=result.cockpitData
				_this.$nextTick(()=>{
					_this.myEcharts();
				})
			},
			myEcharts() {
				// let itemData=[2.65,3.18,3.64,5000]
				// let itemData=['2018','2019','2020','2025']
				let itemData=this.cockpitData.map(item=>{
					return item.index_value
				})
				// console.log(itemData)
				// itemData=itemData
				let itemTitle=this.cockpitData.map(item=>{
					return item.index_date
				})
				// itemTitle=itemTitle
				let myChart = this.$echarts.getInstanceByDom(this.$refs.myChart) ;
				let dataList1 = []
				let colorList=["#46A8FF",'#24DCF7','#F5A787',"#F5BA25",'#FFFFFF',"rgba(35, 84, 128, 0.1)"]
				let colorList1=["#235480",'#735D38','#7B5444']
				itemData.forEach((item,index)=>{
					let labelColor=""
					let itemStyleColor=""
					let itemStyleColor1=""
					let labelfontSize
					if(index==itemData.length-1){
						labelColor=colorList[3]
						itemStyleColor=colorList[2]
						itemStyleColor1=colorList1[2]
						labelfontSize=20
					}else if(index==itemData.length-2){
						labelColor=colorList[1]
						itemStyleColor=colorList[1]
						itemStyleColor1=colorList1[0]
						labelfontSize=15
					}else{
						labelColor=colorList[4]
						itemStyleColor=colorList[0]
						itemStyleColor1=colorList1[0]
						labelfontSize=15
					}
					dataList1.push({
						name:itemTitle[index],
						value:item,
						label:{
							show:true,
							position:'top',
							fontSize:labelfontSize,
							color:labelColor,
							lineHeight:16,
							fontWeight: "bold"
						},
						itemStyle: {
							color: {
									type: "linear",
									x: 0,
									x2: 1,
									y: 0,
									y2: 0,
									colorStops: [
										{
										offset: 0,
										color: itemStyleColor,
										},
										{
										offset: 0.5,
										color: itemStyleColor,
										},
										{
										offset: 0.5,
										color: itemStyleColor1,
										},
										{
										offset: 1,
										color: itemStyleColor1,
										},
									],
							}
						},
					})
				})
				//配置图表
				if (myChart==null) {
				    myChart = this.$echarts.init(this.$refs.myChart);  //利用原型调取Echarts的初始化方法
				}
				const option = {
					// backgroundColor: 'rgba(3, 16, 38, 0.71)',
					tooltip: {
						show: false,
					},
					legend: {
						show: false,
					},
					grid: {
						left: '8%',
						right: '8%',
						top: '25%',
						width: "84%",
						height:'65%',
						containLabel: true
					},
					xAxis: [{
						splitLine: {
							show: false
						},
						axisLine: {
							show: true,
							lineStyle:{
								type:'solid',
								color:'#B1B1B1',
								width:1
							}
						},
						axisTick :{
							show:false
						},
						axisLabel: {
							color: '#DFF8FF',
							fontSize: 17,
						},
						data: itemTitle,
						type: 'category',
						show: true,
					}],
					yAxis: [{
						splitLine: {
							show: true,
							lineStyle:{
								type:'dotted',
								color:'#556468',
								width:1
							}
						},
						axisLine: { //y轴
							show: true,
							lineStyle:{
								type:'solid',
								color:'#B1B1B1',
								width:1
							}
						},
						name:'单位：亿元',
						nameLocation: "end",
						nameTextStyle:{
							color:'#99C8FF',
							fontSize:15,
						},
						type: 'value',
						axisTick: {
							show: false
						},
						axisLabel: {
							color: 'rgba(255,255,255,0.6)',
							fontSize: 15,
							margin: 20
						},
						// max:9,
						// interval:3
					}],
					series: [
						{
							z: 1,
							name: '数据',
							type: "pictorialBar",
							symbol: "triangle",
							barWidth: 37,
							barGap: "0%",
							data: dataList1,
						},
						]
				};
				myChart.setOption(option);  //将编写好的配置项挂载到Echarts上
			}
		},
		
	}
</script>


<style>

</style>
